<!doctype html>
<html>
<!--搜索首页-->
<head>
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>${title}</title>
<link rel="stylesheet" href="${base}/css/default.css" type="text/css">
<script type="text/javascript" src="${base}/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
	//区域选择-显示、隐藏层
	 $('#sa').click(function(){
		$('.mask').toggle();
		$('.sm-area-box').toggle();		
		$('html').toggleClass("ho"); 
	 });
	 $('.mask').click(function(){
		$(this).hide();
		$('.sm-area-box').hide();
	    $('html').toggleClass("ho");
	 });
	 $('.sa-r-box span').click(function(){ 
		$('.sm-area-box, .mask').hide();
	    $('html').toggleClass("ho");
	 });
	//区域选择-选择地区
	$(".sa-r-box").hide();
	$(".sa-l ul li:first").addClass("active").show();
	var pid = $(".sa-l ul li:first").find("span").attr("value")
	var name = $(".sa-l ul li:first").find("span").html();
	getCity(pid,name);
	$(".sa-r-box").show();
	$(".sa-l li").click(function() {
		$(".sa-l li").removeClass("active");
		$(this).addClass("active");
		$(".sa-r-box").hide(); 
		var provinceId = $(this).find("span").attr("value");
		var provincename = $(this).find("span").html();
		getCity(provinceId,provincename);
		$(".sa-r-box").fadeIn(0);
	});	
	
	function getCity(id,name){
		$.ajax({
			url:'${base}/selector/getCity',
			method:'get',
			dataType:'json',
			data:{provinceId:id},
			async:false,
			success:function(data){
				$('#tab1 ul').empty();
				$('#tab1 ul').append('<li><span onclick="javascript:getIt(this);" value="'+id+'" type="1">'+name+'</span></li>');
				for(var i=0;i<data.length;i++){
					$('#tab1 ul').append('<li><span onclick="javascript:getIt(this);" value="'+data[i].id+'"  type="2">'+data[i].name+'</span></li>');
				}
			}
		})
	}
	
	//搜索条件收起	
	 $('.row-head').click(function(){	
		$(this).parent().toggleClass("hrb"); 
	 });
	 
	 $('#category li').click(function(){
	 		$("#category li").removeClass("sc");
	 		$(this).addClass("sc");
	 		var catgory = $(this).find('span').html();
	 		var value = $(this).find('span').attr('value');
	 		$('input[name="category"]').val(value);
	 		$('#category-label').html(catgory);
	 });
	 
	  $('#column li').click(function(){
	 		$("#column li").removeClass("sc");
	 		$(this).addClass("sc");
	 		var column = $(this).find('span').html();
	 		var value = $(this).find('span').attr('value');
	 		$('input[name="column"]').val(value);
	 		$('#column-label').html(column);
	 });
	 
	  $('#publicDate li').click(function(){
	 		$("#publicDate li").removeClass("sc");
	 		$(this).addClass("sc");
	 		var publicDate = $(this).find('span').html();
	 		var value = $(this).find('span').attr('value');
	 		$('input[name="publicDateValue"]').val(value);
	 		$('#publicDate-label').html(publicDate);
	 });
	 
	 $('#search-btn').on('click',function(){
	 	$('input[name="keywords"]').val('');
	 	$('input[name="scope"]').val('');
	 	$('input[name="keywords"]').val($('#keywords').val());
	 	$('input[name="scope"]').val($('#scope').val());
	 	$('#queryForm').submit();
	 });
});
</script>
</head>
<body>
<div class="mask"></div>
<header><a href="javascript:history.go(-1)" class="back"><span>返回</span></a><h2>搜索查询</h2></header>
<nav>
  <ul>
    <li class="n1"><a href="${base}/index/index"><cite></cite><span>首页</span></a></li>
    <li class="n2"><a href="${base}/search/index" class="on"><cite></cite><span>搜索</span></a></li>
    <li class="n3"><a href="${base}/subscribe/index"><cite></cite><span>订阅</span></a></li>
    <li class="n4"><a href="${base}/center/index"><cite></cite><span>我的</span></a></li>
  </ul>
</nav>
<div class="main search-zb">
	<div class="tab-2"><a href="${base}/search/index" class="on">招标信息</a><a href="${base}/agency/index">机构信息</a></div>
	<div class="sm-box">
    	<div class="sm-row sm-kw2">
            <div class="row-head"><label>关键字：</label></div>
            <div class="sm-kw2-sc">
                <div class="ft"><input type="text" placeholder="请输入关键字" id="keywords"/></div>
                <div class="fs">
                    <select id="scope">
                        <option value="all">全文</option>
                        <option value="title">标题</option>
                    </select>
                    <em></em>
                </div>
            </div>
        </div>
    	<div class="sm-row sm-area">
        	<div class="row-head"><label>地区：</label><input type="text" id="sa" placeholder="请选择地区" value="" readonly /><em></em></div>
			<div class="sm-area-box">
            	<div class="sa-l">
                	<ul>
                		<#list provinceList as province>
			                <li><span value="${province.id}">${province.name}</span></li>
			             </#list>
                    </ul>
                </div>
                <div class="sa-r">
                    <div id="tab1" class="sa-r-box">
		                <ul></ul>
		            </div>
                </div>
            </div>
        </div>
    	<div class="sm-row">
        	<div class="row-head"><label>信息分类：</label><span id="category-label"></span><em></em></div>
            <div class="row-body clearfix" id="category">
                <ul>
                	<#list categoryList as category>
                    	<li><span value="${category.id}">${category.name}</span></li>
                    </#list>
                </ul>
            </div>
        </div>
    	<div class="sm-row">
        	<div class="row-head"><label>项目分类：</label><span id="column-label"></span><em></em></div>
            <div class="row-body clearfix" id="column">
                <ul>
                	<#list columnList as column>
                    	<li><span value="${column.id}">${column.name}</li>
                    </#list>
                </ul>
            </div>
        </div>
    	<div class="sm-row">
        	<div class="row-head"><label>发布时间：</label><span id="publicDate-label"></span><em></em></div>
            <div class="row-body clearfix" id="publicDate">
                <ul>
                	<#list publicDateList as publicDate>
                 		<li><span value="${publicDate.id}">${publicDate.name}</span></li>
                    </#list>
                </ul>
            </div>
        </div>
    </div>
    <form id="queryForm" action="${base}/search/search">
    	<input type="hidden" name="keywords" />
    	<input type="hidden" name="scope" />
    	<input type="hidden" name="area" />
    	<input type="hidden" name="areaType" />
    	<input type="hidden" name="category" />
    	<input type="hidden" name="column" />
    	<input type="hidden" name="publicDateValue" />
    </from>
    <div class="btn"><input id="search-btn" type="button" value="搜 索" class="btn-o" /></div>
</div>
<script  type="text/javascript">
	 function getIt(obj){
	 	//alert(obj.innerHTML)
	 	$("#sa").val(obj.innerHTML);
	 	var $v=$(obj);
	 	//console.log($v.attr('value'))
	 	$('input[name="area"]').val($v.attr('value'));
	 	$('input[name="areaType"]').val($v.attr('type'));
	 	$('.sm-area-box, .mask').hide();
	  	$('html').toggleClass("ho");
	 }
</script>
</body>
</html>
